<template>
  <div>
    <div :class="$route.path === '/' || $route.path === '/PrivacyPolicy' || $route.path === '/ForgetPassword' ||　$route.path === '/Register'　|| $route.path === '/UpdatePassword' ? 'mainUser' : 'main'">
      <router-view/>
    </div>
    <van-tabbar v-model="active" v-if="$route.path === '/My' || $route.path === '/Work' ||　$route.path === '/Dashbord'　|| $route.path === '/Message'">
      <van-tabbar-item :icon="route === 0 ? homeActive : home" to="Dashbord">
        <span style="transform: scale(0.8);font-size: 0.75rem;">{{$t('index')}}</span>
      </van-tabbar-item>
      <van-tabbar-item :icon="route === 1 ? workActive : work" to="Work">{{$t('work')}}</van-tabbar-item>
      <van-tabbar-item :icon="route === 2 ? messageActive : message" to="Message" :badge="count ? count : false">{{$t('message')}}</van-tabbar-item>
      <van-tabbar-item :icon="route === 3 ? myActive : my" to="My">{{$t('my')}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
 import { Toast } from 'vant';
 import Home from '../assets/dashbord/home.png'
 import Work from '../assets/dashbord/work.png'
 import Message from '../assets/dashbord/message.png'
 import My from '../assets/dashbord/my.png'
 import HomeActive from '../assets/dashbord/homeActive.png'
 import WorkActive from '../assets/dashbord/workActive.png'
 import MessageActive from '../assets/dashbord/messageActive.png'
 import MyActive from '../assets/dashbord/myActive.png'
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      home: Home,
      work: Work,
      message: Message,
      my: My,
      homeActive: HomeActive,
      workActive: WorkActive,
      messageActive: MessageActive,
      myActive: MyActive,
    }
  },
  computed:{
    count: function() {
      return this.$store.state.num
    },
    route: function() {
      if (this.$route.path === '/Dashbord') {
        return this.active = 0
      } else if (this.$route.path === '/Work') {
        return this.active = 1
      } else if (this.$route.path === '/Message') {
        return this.active = 2
      } else if (this.$route.path === '/My') {
        return this.active = 3
      }
    }
  },
  methods: {
    onClickLeft: function() {
       this.$router.push({
         path: '/'
       })
    },
    onClickRight: function() {
      Toast('按钮');
    }
  }
}
</script>
<style scoped lang="scss">
  .mainUser{
    margin-top: 8 * $spacing;
    background-color: #fff;
    height: 100vh;
  }
  .main {
    background-color: #F5F5F4;
    height: 100vh;
  }
</style>
